<template>

   <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!--  -----------------------表单 -->
       <el-form ref="form" :model="requestParameters" label-width="80px" :label-position="labelPosition">
         <el-row >
            <el-col :span="6" >
          <el-form-item label="学科" prop='subject'>
    <el-select v-model="requestParameters.subject" placeholder="请选择" @change="handleSel">
      <el-option :label="item.label" :value="item.value" v-for='(item,index) in subSelect ' :key='index' ></el-option>
    </el-select>
  </el-form-item>
            </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop='region' ref='subSel'>
    <el-select v-model="requestParameters.region" placeholder="请选择" >
      <el-option :label="item.label " :value="item.value"  v-for='(item,index) in dirList' :key='index' ></el-option>
    </el-select>
  </el-form-item>
            </el-col>        <el-col :span="6">
          <el-form-item label="标签" prop='tags'>
    <el-select v-model="requestParameters.tags" placeholder="请选择" >
      <el-option :label="item.label" :value="item.value"  v-for='(item,index) in tagsDetail' :key='index'></el-option>
    </el-select>
  </el-form-item>
            </el-col>        <el-col :span="6">
          <el-form-item label="关键字" prop='keyword'>
    <el-input v-model="requestParameters.keyword" placeholder="根据题干搜索"></el-input>
  </el-form-item>
            </el-col>
   </el-row>
   <el-row>
     <el-col :span="6">
          <el-form-item label="试题类型" prop='questionType'>
    <el-select v-model="requestParameters.questionType" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for='item in questionType' :key='item.value'></el-option>

    </el-select>
  </el-form-item>
            </el-col>
            <el-col :span="6">
          <el-form-item label="难度" prop='difficulty'>
    <el-select v-model="requestParameters.difficulty" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for='item in difficulty' :key='item.id'></el-option>
    </el-select>
  </el-form-item>
            </el-col>
            <el-col :span="6">
          <el-form-item label="方向" prop='direction'>
    <el-select v-model="requestParameters.direction" placeholder="请选择">
      <el-option :label="item" :value="item" v-for='item in direction' :key='item.id'></el-option>
    </el-select>
  </el-form-item>
            </el-col>
            <el-col :span="6">
          <el-form-item label="录入人" prop='creatorID'>
    <el-select v-model="requestParameters.creatorID" placeholder="请选择">
      <el-option :label="item.creator" :value="item.creatorID" v-for='item in tableData' :key='item.id'></el-option>
    </el-select>
  </el-form-item>
            </el-col>
   </el-row>
   <el-row>
       <el-col :span="6">
          <el-form-item label="题目备注" prop='remarks'>
    <el-input v-model="requestParameters.remarks"></el-input>
  </el-form-item>
            </el-col>
              <el-col :span="6">
          <el-form-item label="企业简称" prop='shortName'>
    <el-input v-model="requestParameters.shortName"></el-input>
  </el-form-item>
            </el-col>
  <el-col :span="6">
    <el-col  :span="24" >
     <el-form-item label="城市" prop='province'>
    <el-select filterable v-model="requestParameters.province"   @keyup.enter="handleFilter"  @change="handleProvince" style="width: 48.5%;" placeholder="请选择">
      <el-option :label="item" :value="item" v-for="item in citySelect.province" :key='item'></el-option>
    </el-select>
      <el-select filterable v-model="requestParameters.city"   style="width: 48.5%;margin-left: 3%;" placeholder="请选择">
      <el-option :label="item" :value="item"  v-for="item in citySelect.cityDate"  :key="item"></el-option>
    </el-select>
     </el-form-item>
</el-col>
   </el-col>
     <el-col :span="6">
    <el-form-item >
     <el-button @click='formChange()' >修改</el-button>
      <el-button  type="primary" @click='handleSearch()'>搜索</el-button>
        </el-form-item>
         </el-col>
          </el-row>
            </el-form>

 <!-- --------------------------tab切换 -->
 <!-- --------------------------tab切换 -->
 <!-- --------------------------tab切换 -->
 <!-- --------------------------tab切换 -->
   <!-- --------------------------tab切换 -->
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  <el-tab-pane label="全部" name="all">
    <!-- ------------------提示消息 -->
  <el-alert
    :title='title'
    type="info"
    show-icon>
  </el-alert>
 <!-- ------------------表格 -->
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column

      prop="id"
      label="试题编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="120">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="120">
         <template v-slot='{row}'>
        {{  row.questionType==1? questionType[0].label: row.difficulty==2? questionType[1].label :questionType[2].label}}
      </template>
    </el-table-column>
  <el-table-column
      prop="question"
      label="题干"
      width="300">
      <template v-slot='{row}'>
        {{removeHTML(row.question)}}
      </template>
    </el-table-column>
      <el-table-column
      prop="addDate"
      label="录入时间"
      width="300">
      <template v-slot='{row}'>
       {{ parseTime(row.addDate)}}
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="300">
      <template v-slot='{row}'>
       {{ row.difficulty==1? '简单': row.difficulty==2? '一般' :'困难'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="300">
    </el-table-column>
     <el-table-column
      prop="chkState"
      label="审核状态"
      width="300">
       <template v-slot='{row}'>
      {{ row.chkState==0? '待审核': row.chkState==1? '通过' :'拒绝'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="300">
    </el-table-column>
    <el-table-column
      prop="chkUser"
      label="审核人"
      width="300">
    </el-table-column>
 <el-table-column
      prop="publishState"
      label="发布状态"
      width="300">
       <template v-slot='{row}'>
        {{ row.publishState==0? '已下架' :'已上架'}}
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="190">
      <template v-slot='{row}'>
        <el-button @click="handlePreview(row.id)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click='handleche(row.id,row.chkState)' :disabled='row.chkState==0? false:true' >审核</el-button>
         <el-button type="text" size="small" @click='handlejup()'>修改</el-button>
          <el-button type="text" size="small" @click='handlePub(row.id,row.publishState)'>{{row.publishState==0? '上架':'下架'}}</el-button>
           <el-button type="text" size="small" @click='handleDel(row.id)'>删除</el-button>
      </template>
    </el-table-column>
  </el-table></el-tab-pane>
  <!-- ------------------------------------------------------------ -->
   <!-- ------------------------------------------------------------ -->
    <!-- ------------------------------------------------------------ -->
     <!-- ------------------------------------------------------------ -->
      <!-- ------------------------------------------------------------ -->
  <el-tab-pane label="待审核" name="await">
     <el-alert
    :title='title'
    type="info"
    show-icon>
  </el-alert>
 <!-- ------------------表格 -->
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column

      prop="id"
      label="试题编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="120">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="题型"
      width="120">
    </el-table-column>
<el-table-column
      prop="question"
      label="题干"
      width="300">
      <template v-slot='{row}'>
        {{removeHTML(row.question)}}
      </template>
    </el-table-column>
      <el-table-column
      prop="addDate"
      label="录入时间"
      width="300">
      <template v-slot='{row}'>
       {{ parseTime(row.addDate)}}
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="300">
      <template v-slot='{row}'>
       {{ row.difficulty==1? '简单': row.difficulty==2? '一般' :'困难'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="300">
    </el-table-column>
     <el-table-column
      prop="chkState"
      label="审核状态"
      width="300">
       <template v-slot='{row}'>
       {{ row.chkState==0? '待审核': row.chkState==1? '通过' :'拒绝'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="300">
    </el-table-column>
    <el-table-column
      prop="chkUser"
      label="审核人"
      width="300">
    </el-table-column>
 <el-table-column
      prop="publishState"
      label="发布状态"
      width="300">
       <template v-slot='{row}'>
       {{ row.publishState==0? '已下架' :'已上架'}}
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="190">
      <template v-slot='{row}'>
        <el-button @click="handlePreview(row.id)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click='handleche(row.id)' :disabled='row.chkState==0? false:true'>审核</el-button>
         <el-button type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click='handlePub(row.id,row.publishState)'>{{row.publishState==0? '上架':'下架'}}</el-button>
           <el-button type="text" size="small" @click='handleDel(row.id)'>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </el-tab-pane>
  <el-tab-pane label="已审核" name="finish">
     <el-alert
    :title='title'
    type="info"
    show-icon>
  </el-alert>
 <!-- ------------------表格 -->
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column

      prop="id"
      label="试题编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="120">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="题型"
      width="120">
    </el-table-column>
 <el-table-column
      prop="question"
      label="题干"
      width="300">
      <template v-slot='{row}'>
        {{removeHTML(row.question)}}
      </template>
    </el-table-column>
      <el-table-column
      prop="addDate"
      label="录入时间"
      width="300">
      <template v-slot='{row}'>
       {{ parseTime(row.addDate)}}
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="300">
      <template v-slot='{row}'>
       {{ row.difficulty==1? '简单': row.difficulty==2? '一般' :'困难'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="300">
    </el-table-column>
     <el-table-column
      prop="chkState"
      label="审核状态"
      width="300">
       <template v-slot='{row}'>
       {{ row.chkState==0? '待审核': row.chkState==1? '通过' :'拒绝'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="300">
    </el-table-column>
    <el-table-column
      prop="chkUser"
      label="审核人"
      width="300">
    </el-table-column>
 <el-table-column
      prop="publishState"
      label="发布状态"
      width="300">
       <template v-slot='{row}'>
         {{ row.publishState==0? '已下架' :'已上架'}}
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="190">
      <template v-slot='{row}'>
        <el-button @click="handlePreview(row.id)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click='handleche(row.id)' :disabled='row.chkState==0? false:true'>审核</el-button>
         <el-button type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click='handlePub(row.id,row.publishState)'>{{row.publishState==0? '上架':'下架'}}</el-button>
           <el-button type="text" size="small" @click='handleDel(row.id)'>删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- ------------------------------------------------ -->

  </el-tab-pane>
  <el-tab-pane label="已拒绝" name="reject">
     <el-alert
    :title="title"
    type="info"
    show-icon>
  </el-alert>
 <!-- ------------------表格 -->
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column

      prop="id"
      label="试题编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科"
      width="120">
    </el-table-column>
    <el-table-column
      prop="catalog"
      label="目录"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="题型"
      width="120">
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
      width="300">
      <template v-slot='{row}'>
        {{removeHTML(row.question)}}
      </template>
    </el-table-column>
      <el-table-column
      prop="addDate"
      label="录入时间"
      width="300">
      <template v-slot='{row}'>
       {{ parseTime(row.addDate)}}
      </template>
    </el-table-column>
    <el-table-column
      prop="difficulty"
      label="难度"
      width="300">
      <template v-slot='{row}'>
       {{ row.difficulty==1? '简单': row.difficulty==2? '一般' :'困难'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="300">
    </el-table-column>
     <el-table-column
      prop="chkState"
      label="审核状态"
      width="300">
       <template v-slot='{row}'>
       {{ row.chkState==0? '待审核': row.chkState==1? '通过' :'拒绝'}}
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="300">
    </el-table-column>
    <el-table-column
      prop="chkUser"
      label="审核人"
      width="300">
    </el-table-column>
 <el-table-column
      prop="publishState"
      label="发布状态"
      width="300">
       <template v-slot='{row}'>
         {{ row.publishState==0? '已下架' :'已上架'}}
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="190">
      <template v-slot='{row}'>
        <el-button @click="handlePreview(row.id)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click='handleche(row.id,row.chkState)' :disabled='row.chkState==0? false:true'>审核</el-button>
         <el-button type="text" size="small" @click='handleche(row.id)'>修改</el-button>
          <el-button type="text" size="small" @click='handlePub(row.id,row.publishState)'>{{row.publishState==0? '上架':'下架'}}</el-button>
           <el-button type="text" size="small" @click='handleDel(row.id)'>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </el-tab-pane>

  </el-tabs>
   <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total='counts'
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[1,2,3, 4]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
 <!-- ---------------------------------表格 -->

         </el-card>
         <questionsCheck :isShow.sync='isShowche' :chkids='chkid' ></questionsCheck>
         <sift-questions-preview :isShow.sync='isShow' :detailData='detailData' ></sift-questions-preview>
      </div>
     </div>
</template>

<script>

import { choice, detail, choicePublish, remove } from '@/api/hmmm/questions.js'
import { parseTime } from '@/utils/index.js'
import { status, difficulty, direction, questionType } from '@/api/hmmm/constants'
import { dirSimple } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { subSimple } from '@/api/hmmm/subjects.js'
import questionsCheck from '../components/questions-check'
import siftQuestionsPreview from '../components/sift-questions-preview.vue'
import { tagsSimple } from '@/api/hmmm/tags.js'

const removeHTML = (str = '') => str.replace(/<[/!]*[^<>]*>/ig, '')
export default {
  components: {
    questionsCheck,
    siftQuestionsPreview
  },
  data () {
    return {

      // 弹窗展示
      disabled: false,

      // 学科下拉
      subSelect: [],
      chidls: {
        chid: ''
      },

      // 城市下拉
      citySelect: {
        province: [],
        cityDate: []
      },

      // 标签详情
      tagsDetail: [],
      dirList: [],

      // 常量
      questionType: questionType,
      status: status,
      difficulty: difficulty,
      direction: direction,
      removeHTML: removeHTML,
      counts: 0,
      isShowche: false,
      chkid: '',
      isShow: false,

      // 分页
      requestParameters: {
        page: '1',
        pagesize: '3'
      },
      labelPosition: 'right',

      // tab栏选项
      activeName: 'all',

      // 表格数据
      tableData: [],
      detailData: []

    }
  },
  methods: {

    // 清空表单
    formChange () {
      this.$refs.form.resetFields()
    },

    // 获取目录和标签列表
    async handleSel (event) {
      this.$set(this.requestParameters, 'region', '')
      this.$set(this.requestParameters, 'tags', '')
      const ret = await dirSimple({ subjectID: event })
      this.dirList = ret.data
      const ret2 = await tagsSimple({ subjectID: event })
      this.tagsDetail = ret2.data
    },

    // 获取学科列表
    async handleSub () {
      const res = await subSimple()
      this.subSelect = res.data
    },

    // 获取表格数据
    async handleSearch () {
      const ret = await choice(this.requestParameters)
      this.tableData = ret.data.items
      this.counts = ret.data.counts
    },

    // 删除
    handleDel (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.loadChoice()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 修改跳转
    handlejup () {
      this.$router.push('/questions/new')
    },

    // 上下架
    handlePub (id, publishState) {
      this.$confirm(`您确认${publishState === 0 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (publishState === 0) {
          await choicePublish({ id: id, publishState: 1 })
          this.loadChoice()
        } else {
          await choicePublish({ id: id, publishState: 0 })
          this.loadChoice()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 审核
    handleche (id) {
      this.chkid = id
      this.isShowche = true
    },

    // 格式化时间
    parseTime (time) {
      return parseTime(time)
    },

    // 分页
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      this.loadChoice()
    },
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.loadChoice()
    },

    // tabs栏切换
    async  handleClick (tab) {
      if (tab.name === 'all') {
        const { data: { items, counts } } = await choice(this.requestParameters)
        this.counts = counts
        this.tableData = items
      } else if (tab.name === 'await') {
        const { data } = await choice({ page: 1, pagesize: 10000 })
        const awaitList = data.items.filter(item => { return item.chkState === 0 })
        this.counts = awaitList.length
        this.tableData = awaitList
      } else if (tab.name === 'finish') {
        const { data: { items } } = await choice({ page: 1, pagesize: 10000 })
        const finishList = items.filter(item => { return item.chkState === 1 })
        this.counts = finishList.length
        this.tableData = finishList
      } else if (tab.name === 'reject') {
        const { data: { items } } = await choice({ page: 1, pagesize: 10000 })
        const rejectList = items.filter(item => { return item.chkState === 2 })
        this.counts = rejectList.length
        this.tableData = rejectList
      }
    },

    // 预览
    async  handlePreview (id) {
      this.isShow = true
      const { data } = await detail({ id: id })
      this.detailData = data
    },

    // 获取列表数据
    async loadChoice () {
      const ret = await choice(this.requestParameters)
      this.tableData = ret.data.items
      this.counts = ret.data.counts
      return (ret)
    },

    // 获取市
    getCityData: function () {
      this.citySelect.province = provinces()
    },

    // 选省获取到区/县
    handleProvince: function (e) {
      this.$set(this.requestParameters, 'city', '')
      this.citySelect.cityDate = citys(e)
    }
  },
  computed: {

    // 提示栏条数
    title () {
      return `数据一共${this.counts}条`
    }
  },
  created () {
    this.handleSub()
    this.loadChoice()
    var _this = this
    this.getCityData()
    this.handleProvince()
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  }
}

</script>

<style scoped lang='less'></style>
